<template>
<div class="slug">
  <h1>My IDs</h1>
  <p>IDs found&#58; {{numWalletCards}}</p>
  <div v-if="numWalletCards > 0">
    <Deck :deck="walletCards"
          :cpath="`/wallet/cred/`"/>
  </div>
  
  <hr />
  
  <h2>Add More</h2>
  
  <form @submit.prevent="addWalletCard(card); card={name: '', email: '', phone: ''}">
    <input type="text" placeholder="Name" v-model="card.name" required />
    <input type="text" placeholder="Email" v-model="card.email" />
    <input type="text" placeholder="Phone" v-model="card.phone" />
    <button>Submit</button>
  </form>
  
</div>
</template>

<script>
import {mapState, mapMutations, mapGetters} from "vuex"
import Deck from '@/components/Deck.vue'


export default {
    name: "Wallet",
    data() {
        return {
            card: {name: "", email: "", phone: ""}
        }
    },
    components: { Deck },
    computed: {
        ...mapState([
            "walletCards",
        ]),
        ...mapGetters([
            "numWalletCards"
        ])
    },
    methods: {
        ...mapMutations([
            "addWalletCard",
        ])
    }
}
</script>

<style>
</style>
